<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端框选</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .test{
            border: 1px solid red;
            width: 0px;
            height: 0px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <img id="imgshow" src="http://127.0.0.1:38088/video=stream&camidx=0" width="400px" height="300px" alt="">
    <img id="scanRes" src="" width="400px" height="300px" alt="拍照后的图像">
    <img id="deskewRes" src="" width="400px" height="300px" alt="框选后的图像">
    <hr>
    <div>
        <button id="scan">拍照</button>
        <button id="rotateLeft">左转</button>
        <button id="rotateRight">右转</button>
    </div>
    <div id="rect" class="test"></div>
    <hr>
    <!-- 设备分辨率：<input id="num1" type="text" value="3264"> <input type="text" value="2448"><br> -->
    设备分辨率：<input id="resolutionWidth" type="text" value="2592"> <input id="resolutionHeight" type="text" value="1944"><button id="getSoureResolution">获取当前分辨率</button><br>
    预览框尺寸：<input id="num2" type="text" value="400"> <input type="text" value="300"><button id="resizeView">计算宽高比，调整预览框比例</button><br>
    缩放：<input id="b" type="text" value=""><button id="zoomScale">计算缩放比</button><br>
    旋转角度： <input id="rotateInput" type="text" value=""><br>
    RECT  LEFT: <input id="res_left" type="text"> TOP: <input id="res_top" type="text"> RIGHT: <input id="res_right" type="text"> BOTTOM: <input id="res_bottom" type="text">
    <hr>
    <p style="color: red;">请使用鼠标在预览视频中，从左到右画出矩形框，图片默认保存在D盘，详细信息请看控制台</p>
    <script>
        // ondragstart - 用户开始拖动元素时触发
        // ondrag - 元素正在拖动时触发
        // ondragend - 用户完成元素拖动后触发
        const imgElement = document.getElementById("imgshow");                  // 预览框dom
        const scanResElament = document.getElementById("scanRes");              // 拍照结果显示框dom
        const deskewResElement = document.getElementById("deskewRes");          // 框选结果显示框dom
        const base64Header = 'data:image/jpg;base64,'                           // base64数据头
        var divElement = document.getElementById("rect")

        // 设备当前分辨率
        let soureDevWidth = 0;
        let soureDevHeight = 0;

        // 缩放比
        let zoomScaleVal = 0;

        // 旋转角度
        let rotationAngle = 0;

        // dom，Windows RECT value
        var res_left = document.getElementById("res_left")
        var res_top = document.getElementById("res_top")
        var res_right = document.getElementById("res_right")
        var res_bottom = document.getElementById("res_bottom")

        var x1,x2,y1,y2;
        var cx1,cy1,cx2,cy2;
        imgElement.ondragstart = function(e){
            console.log(e)
            x1 = e.offsetX
            y1 = e.offsetY
            cx1 = e.clientX
            cy1 = e.clientY
        }
        imgElement.ondragend = function(e){
            console.log(e)
            x2 = e.offsetX
            y2 = e.offsetY
            cx2 = e.clientX
            cy2 = e.clientY

            // draw
            divElement.style = "position:absolute;top:"+cy1+"px;left:"+cx1+"px;width:"+(cx2-cx1)+"px;height:"+(cy2-cy1)+"px";
            res_left.value = Math.round(x1 * zoomScaleVal);
            res_top.value = Math.round(y1 * zoomScaleVal);
            res_right.value = Math.round(x2 * zoomScaleVal);
            res_bottom.value = Math.round(y2 * zoomScaleVal);

            // http
            data = {
                "filepath": "D:\\1.jpg",
                "left": res_left.value,
                "top": res_top.value,
                "right": res_right.value,
                "bottom": res_bottom.value
            }
            $.post("http://127.0.0.1:38088/select=imagearea", JSON.stringify(data), (res)=>{
                console.log("框选结果：", res);
                deskewResElement.src= base64Header + res.base64
            })
        }

        // 拍照
        $("#scan").click(()=>{
            let data = {
                "filepath": "",
                "camidx": "0"
            }
            $.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data), res=>{
                console.log("拍照结果：", res);
                scanResElament.src = base64Header + res.photoBase64
            })
        })

        // 左转，逆时针旋转
        $("#rotateLeft").click(()=>{
            // 旋转
            $.post("http://127.0.0.1:38088/video=rotate", JSON.stringify({"camidx": "0", "rotate": "90"}))
            
            // 计算角度
            rotationAngle += 90;
            if (rotationAngle >=360){
                rotationAngle-=360;
            }

            $('#rotateInput').attr("value", rotationAngle);
            rotateChange();
        })

        // 右转
        $("#rotateRight").click(()=>{
            $.post("http://127.0.0.1:38088/video=rotate", JSON.stringify({"camidx": "0", "rotate": "270"}))

            rotationAngle -= 90;
            if(rotationAngle < 0)
            {
                rotationAngle += 360;
            }
            $('#rotateInput').attr("value", rotationAngle);
            rotateChange();
        })

        // bind
        function rotateChange(){
            if(rotationAngle==90 || rotationAngle==270){
                $("#imgshow").attr("width", "300px");
                $("#imgshow").attr("height", "400px");

                $("#scanRes").attr("width", "300px");
                $("#scanRes").attr("height", "400px");

                $("#deskewRes").attr("width", "300px");
                $("#deskewRes").attr("height", "400px");
            }
            else{
                $("#imgshow").attr("width", "400px");
                $("#imgshow").attr("height", "300px");

                $("#scanRes").attr("width", "400px");
                $("#scanRes").attr("height", "300px");

                $("#deskewRes").attr("width", "400px");
                $("#deskewRes").attr("height", "300px");
            }
        }

        // 获取设备当前分辨率
        $("#getSoureResolution").click(()=>{
            $("#scan").click();
            soureDevHeight = scanResElament.naturalHeight;
            soureDevWidth = scanResElament.naturalWidth

            $("#resolutionWidth").val(soureDevWidth);
            $("#resolutionHeight").val(soureDevHeight);
            alert("如果当前分辨率为0，请拍照后重试！")
        })

        // 计算宽高比，调整预览框比例
        $("#resizeView").click(()=>{
            // 比例有两种，1. 4:3  2. 16:9
            // 基本都是 4:3，所以这里的代码暂时不写
        })

        // 计算缩放比
        $("#zoomScale").click(()=>{
            zoomScaleVal = document.getElementById('resolutionWidth').value / document.getElementById('num2').value;
            $("#b").val(zoomScaleVal)
        })
        $("#zoomScale").click()
    </script>
</body>
</html>